<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溺水救援模拟</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0 0 100px 0;
            background-color: #f0f8ff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            width: 100%;
            overflow-x: hidden;
        }
        
        h1 {
            color: #0066cc;
            text-align: center;
            margin: 2vh 0;
            font-size: 2.5rem;
        }
        
        .scene-container {
            position: relative;
            width: 90%;
            height: 60vh;
            max-width: 1600px;
            border: 2px solid #333;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 3vh;
            background-color: #e6f7ff;
        }
        
        .water {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to bottom, #66ccff, #0066cc);
            border-top: 2px solid #3399ff;
        }
        
        .shore {
            position: absolute;
            top: 40%;
            right: 0;
            width: 30%;
            height: 60%;
            background-color: #d2b48c;
            border-top-left-radius: 50px 150px;
            box-shadow: -5px 0 10px rgba(0,0,0,0.2);
        }
        
        .drowning-person {
            position: absolute;
            width: 10%;
            height: 25%;
            background-image: url('img_nishuizhe.png');
            background-size: contain;
            background-repeat: no-repeat;
            bottom: 30%;
            left: 40%;
            animation: drowning 2s infinite alternate;
            z-index: 10;
        }
        
        .drowning-person::after {
            content: '救命!';
            position: absolute;
            top: -30px;
            left: 0;
            color: red;
            font-weight: bold;
            font-size: 20px;
            white-space: nowrap;
        }
        
        .passerby {
            position: absolute;
            width: 12%;
            height: 26%;
            background-image: url('img_anshang.png');
            background-size: contain;
            background-repeat: no-repeat;
            bottom: 40%;
            right: 1%;
            z-index: 10;
        }
        
        .basketball {
            position: absolute;
            width: 4%;
            height: 10%;
            background-image: url('篮球.png');
            background-size: contain;
            background-repeat: no-repeat;
            bottom: 40%;
            right: 5%;
            z-index: 15;
        }
        
        .basketball::after {
            content: '篮球';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            white-space: nowrap;
        }
        
        .iron-ball {
            position: absolute;
            width: 50px;
            height: 50px;
            background: radial-gradient(circle, #999999, #333333);
            border-radius: 50%;
            bottom: 5%;
            right: 20%;
            z-index: 15;
        }
        
        .iron-ball::after {
            content: '铁球';
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            color: #333;
            font-size: 16px;
            font-weight: bold;
        }
        
        .wooden-board {
            position: absolute;
            width: 8%;
            height: 5%;
            background: linear-gradient(to right, #996633, #cc9966);
            bottom: 5%;
            right: 5%;
            z-index: 15;
        }
        
        .wooden-board::after {
            content: '木板';
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            color: #996633;
            font-size: 16px;
            font-weight: bold;
        }
        
        .options-container {
            text-align: center;
            margin-bottom: 3vh;
            width: 90%;
            max-width: 1600px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .hint {
            font-size: 1.5rem;
            margin-bottom: 2vh;
            margin-top: 0.5%;
            color: #333;
            text-align: center;
            width: 100%;
        }
        
        .options {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 30px;
        }
        
        .option {
            padding: 1.5vh 3vw;
            background-color: #0066cc;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.2rem;
            transition: background-color 0.3s;
        }
        
        .option:hover {
            background-color: #004499;
        }
        
        .result {
            font-size: 2.5rem;
            font-weight: bold;
            color: #333;
            min-height: 5vh;
        }
        
        .reset-btn {
            padding: 1.5vh 3vw;
            background-color: #ff6666;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.2rem;
            display: none;
            margin: 0;
        }
        
        .reset-btn:hover {
            background-color: #cc3333;
        }
        
        @keyframes drowning {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-10px) rotate(5deg);
            }
            100% {
                transform: translateY(0) rotate(-5deg);
            }
        }
        
        /* 动画类 */
        /* 救援物品动画 */
        #basketball.basketball-rescue {
            animation: basketball-rescue 5s forwards;
        }
        
        #ironBall.iron-ball-sink {
            animation: iron-ball-sink 3s forwards;
        }
        
        #woodenBoard.wooden-board-rescue {
            animation: wooden-board-rescue 5s forwards;
        }
        
        /* 溺水者动画 */
        #drowningPerson.basketball-rescue {
            animation: drowning-person-basketball 5s forwards;
        }
        
        #drowningPerson.iron-ball-sink {
            animation: drowning-person-iron 3s forwards;
        }
        
        #drowningPerson.wooden-board-rescue {
            animation: drowning-person-wooden 5s forwards;
        }
        
        @keyframes basketball-rescue {
            0% {
                left: 40%;
                bottom: 30%;
            }
            20% {
                left: 40%;
                bottom: 30%;
            }
            40% {
                left: 40%;
                bottom: 35%;
                transform: scale(1.2);
            }
            100% {
                left: 75%;
                bottom: 40%;
                transform: scale(1);
            }
        }
        
        @keyframes drowning-person-basketball {
            0% {
                left: 37%;
                bottom: 31%;
            }
            20% {
                left: 37%;
                bottom: 31%;
            }
            40% {
                left: 37%;
                bottom: 36%;
            }
            100% {
                left: 72%;
                bottom: 41%;
            }
        }
        
        @keyframes iron-ball-sink {
            0% {
                left: 40%;
                bottom: 30%;
            }
            20% {
                left: 40%;
                bottom: 30%;
            }
            100% {
                left: 40%;
                bottom: 0%;
                opacity: 0.3;
            }
        }
        
        @keyframes drowning-person-iron {
            0% {
                left: 37%;
                bottom: 28%;
            }
            20% {
                left: 37%;
                bottom: 28%;
            }
            100% {
                left: 37%;
                bottom: 0%;
                opacity: 0.3;
            }
        }

        @keyframes wooden-board-rescue {
            0% {
                left: 40%;
                bottom: 30%;
            }
            20% {
                left: 40%;
                bottom: 30%;
            }
            40% {
                left: 40%;
                bottom: 35%;
            }
            100% {
                left: 70%;
                bottom: 40%;
            }
        }
        
        @keyframes drowning-person-wooden {
            0% {
                left: 40%;
                bottom: 25%;
            }
            20% {
                left: 40%;
                bottom: 25%;
            }
            40% {
                left: 40%;
                bottom: 30%;
            }
            100% {
                left: 70%;
                bottom: 35%;
            }
        }

        .success::after {
            content: '谢谢你救了我！';
            color: #009900;
        }

        .error::after {
            content: '很遗憾，你救不了我。';
            color: #cc0000;
        }
        
        @keyframes drowning-person-wooden {
            0% {
                left: 40%;
                bottom: 25%;
            }
            20% {
                left: 40%;
                bottom: 25%;
            }
            40% {
                left: 40%;
                bottom: 30%;
            }
            100% {
                left: 70%;
                bottom: 35%;
            }
        }
        /* 添加响应式设计 */
        @media (max-width: 768px) {
            h1 {
                font-size: 1.8rem;
            }
            
            .scene-container {
                height: 60vh;
            }
            
            .hint {
                font-size: 1.2rem;
            }
            
            .option {
                font-size: 1.4rem;
                padding: 1vh 2vw;
            }
            
            .result {
                font-size: 1.4rem;
            }
        }
        
        @media (max-width: 480px) {
            h1 {
                font-size: 1.5rem;
            }
            
            .scene-container {
                height: 50vh;
            }
            
            .options {
                flex-direction: column;
                margin-top: 100px;
            }
            
            .hint {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <h1>溺水救援AI教学模拟系统</h1>
    
    <div class="scene-container">
        <div class="hint">如果你是路人，该怎么救助溺水者呢？</div>
        <div class="water"></div>
        <div class="shore"></div>
        <div class="drowning-person" id="drowningPerson"></div>
        <div class="passerby" id="passerby"></div>
        <div class="basketball" id="basketball"></div>
        <div class="iron-ball" id="ironBall"></div>
        <div class="wooden-board" id="woodenBoard"></div>
    </div>
    
    <div class="options-container">
        <div class="result" id="result"></div>
        <div class="options">
            <button class="option" id="optionA">A. 篮球</button>
            <button class="option" id="optionB">B. 铁球</button>
            <button class="option" id="optionC">C. 木板</button>
            <button class="reset-btn" id="resetBtn">重新选择</button>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
    let hasChoiceMade = false;
            const drowningPerson = document.getElementById('drowningPerson');
            const passerby = document.getElementById('passerby');
            const basketball = document.getElementById('basketball');
            const ironBall = document.getElementById('ironBall');
            const woodenBoard = document.getElementById('woodenBoard');
            const optionA = document.getElementById('optionA');
            const optionB = document.getElementById('optionB');
            const optionC = document.getElementById('optionC');
            const result = document.getElementById('result');
            const resetBtn = document.getElementById('resetBtn');
            
            // 禁用选项的函数
            function disableOptions() {
                if (!hasChoiceMade) {
                    resetBtn.style.display = 'block';
                    hasChoiceMade = true;
                }
                optionA.disabled = true;
                optionB.disabled = true;
                optionC.disabled = true;
                            }
            
            
            // 选项A：篮球
            optionA.addEventListener('click', function() {
                disableOptions();
                
                // 调整物品层级
                [basketball, ironBall, woodenBoard].forEach(item => item.style.zIndex = '15');
                
                basketball.classList.add('basketball-rescue');
                drowningPerson.classList.add('basketball-rescue');
                
                result.textContent = '正确！篮球有浮力，可以帮助溺水者浮起并游到岸边。';
                result.style.color = '#009900';
                
                drowningPerson.addEventListener('animationend', () => {
                    drowningPerson.classList.add('success');
                    drowningPerson.style.backgroundImage = "url('上岸后.png')";
                    resetBtn.style.display = 'block';
                });
            });
            
            // 选项B：铁球
            optionB.addEventListener('click', function() {
                disableOptions();
                
                // 调整物品层级
                [basketball, ironBall, woodenBoard].forEach(item => item.style.zIndex = '15');
                
                ironBall.style.right = 'auto';
                ironBall.style.left = '45%';
                ironBall.style.bottom = '30%';
                
                drowningPerson.classList.add('iron-ball-sink');
                ironBall.classList.add('iron-ball-sink');
                
                result.textContent = '错误！铁球会沉入水中，会导致溺水者更快沉入水底。';
                result.style.color = '#cc0000';
                
                drowningPerson.addEventListener('animationend', () => {
                    drowningPerson.classList.add('error');
                    resetBtn.style.display = 'block';
                });
            });
            
            // 选项C：木板
            optionC.addEventListener('click', function() {
                disableOptions();
                
                // 调整物品层级
                [basketball, ironBall, woodenBoard].forEach(item => item.style.zIndex = '15');
                
                woodenBoard.style.right = 'auto';
                woodenBoard.style.left = '45%';
                woodenBoard.style.bottom = '30%';
                woodenBoard.style.zIndex = '15';
                
                drowningPerson.classList.add('wooden-board-rescue');
                woodenBoard.classList.add('wooden-board-rescue');
                
                result.textContent = '正确！木板有浮力，可以帮助溺水者浮起并游到岸边。';
                drowningPerson.addEventListener('animationend', () => {
                    drowningPerson.classList.add('success');
                    drowningPerson.style.backgroundImage = "url('上岸后.png')";
                    resetBtn.style.display = 'block';
                });
                result.style.color = '#009900';
            });
            
            // 重置按钮
            resetBtn.addEventListener('click', function() {
                location.reload();
            });
        });
    </script>
</body>
</html>